<template>
  <div class="appp">
    <dv-full-screen-container>
      <div class="warrper">
        <div>
          <to-head
            :startTime="startTime"
            :endTime="endTime"
            :title="title"
            :wcid="wcid"
            :wcList="wcList"
          />
        </div>
        <div>
          <div class="content">
            <dv-border-box-12
              class="left2 border11"
              :color="['#296db1']"
              style="flex: 4"
            >
              <!-- 产线实时数据统计 -->
              <left-2
                :dateList="dateList"
                :dataList="reportTwoData"
                :mkey="1"
              ></left-2>
            </dv-border-box-12>
            <div class="left1" style="flex: 3">
              <num :dataV="reprotOneData"></num>
            </div>

            <dv-border-box-12
              class="left3 border11"
              :color="['#296db1']"
              style="flex: 2"
            >
              <!-- 良品率 -->
              <lp-rate :rate="lpRate"></lp-rate>
            </dv-border-box-12>
          </div>
          <div class="bottom">
            <dv-border-box-11
              class="border11"
              title="车间实时生产统计"
              :color="['#6cb2d6', '#043f8c']"
            >
              <table-list
                :headerList="reportFourHeader"
                :dataList="reportFourDataList"
                :eqNum="reprotEqNum"
              ></table-list>
            </dv-border-box-11>
          </div>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
// import { getStore, SPF } from '../utils/storage'
import ToHead from './ToHead.vue'
import Left2 from './Left2.vue'
import TableList from './TableList.vue'
import LpRate from './LpRate.vue'
import Num from './Num.vue'
import dataApi, { baseUrl } from '../api/dataApi'
import qs from 'qs'
import moment from 'moment'
const DATE_FORMAT = 'yyyy-MM-DD'
const MONTH_DATE_FORMAT = 'MM-DD'
let timer = null

export default {
  name: 'App',
  components: {
    ToHead,
    Left2,
    TableList,
    LpRate,
    Num,
  },
  props: {
    wcList: {
      type: Array,
      default: function() {
        return []
      },
    },
  },
  watch: {},

  created() {
    // this.wcList = getStore(SPF.OWNCENTER)
    const _that = this
    // 设置时间段
    _that.startTime = moment()
      .subtract(13, 'days')
      .format(DATE_FORMAT)
    _that.endTime = moment().format(DATE_FORMAT)
    let d = 14,
      _dateList = []
    while (d--) {
      _dateList.push(
        moment()
          .subtract(d, 'days')
          .format(MONTH_DATE_FORMAT)
      )
    }
    _that.dateList = _dateList
    console.log('wcid', this.$route.params.wcid)

    const _wcid =
      this.$route.params && this.$route.params.wcid
        ? this.$route.params.wcid
        : _that.wcList[0].wcid
    _that.wcid = _wcid
    _that.getData(_wcid)

    // timer = setInterval(() => {
    //   _that.indexInv++
    //   _that.getData(_that.wcid)
    // }, 5000)
  },
  destroyed() {
    timer && clearInterval(timer)
  },
  methods: {
    getData(wcid) {
      const _wcid = wcid ? wcid : ''
      //派工数量、累计报工、合格数、报废数
      this.loadData(
        _wcid,
        'spsd_report_01',
        this.qOne,
        'ddate',
        this.startTime + '~' + this.endTime
      )
      // 车间实时生产统计-表头
      this.loadData(_wcid, 'spsd_report_03', this.qThree)
      // 车间实时生产统计-num
      this.loadData(_wcid, 'spsd_report_04', this.qFour)
      // 良品率
      this.getLpData(_wcid)
    },
    qFour(reportData) {
      if (reportData.length > 0) {
        const _rd = { ...reportData[0] }
        const _req = {
          runningNum: _rd.running,
          normalNum: _rd.normal,
          disabledNum:
            (isNaN(_rd.fault) ? _rd.fault : 0) +
            (isNaN(_rd.disabled) ? _rd.disabled : 0),
        }
        this.reprotEqNum = _req
      }
    },
    qThree(reportData) {
      const _reportData = []
      reportData.forEach((reportItem) => {
        const _m = []

        // '机台名称',
        // '工序名称',
        // '今日报工',
        // '生产订单',
        // '物料名称',
        // '派工数量',
        // '报工数量',
        // '合格数量',
        // '操作人',
        // '开工时间',
        // '累计时长',
        // '状态',
        _m.push(reportItem.appname)
        _m.push(reportItem.operation_name)
        _m.push(reportItem.reportqty)
        _m.push(reportItem.mocode)
        _m.push(reportItem.invname)
        _m.push(reportItem.shiftqty)
        _m.push(reportItem.dreportqty)
        _m.push(reportItem.dqualifiedqty)
        _m.push(reportItem.operator)
        _m.push(reportItem.dworktime)
        _m.push(reportItem.allworktime)
        let _stateText = ''
        switch (reportItem.state) {
          case 'disabled':
            // _stateText = '<span style="color:#9fe6b8;">停用</span>'
            // _stateText = '<span style="border-radius: 50%;width: 1rem;height: 1rem;"></span>'
            _stateText = '<span style="color:#ff0000;">●</span>'
            break
          case 'fault':
            // _stateText = '故障'
            _stateText = '<span style="color:#9fe6b8;">●</span>'
            break
          case 'normal':
            // _stateText = '<span style="color:#2de3f9;">正常/空闲</span>'
            _stateText = '<span style="color:#2de3f9;">●</span>'
            break
          case 'running':
            _stateText = '<span style="color:#23c84e;">●</span>'
            // _stateText = '<div style="background: #23c84e, border-radius: 50%;width: 1rem;height: 1rem;"></div>'
            break
        }
        _m.push(_stateText)
        _reportData.push(_m)
      })
      this.reportFourDataList = _reportData
    },
    qOne(reportData) {
      const _m = {},
        _date = [...this.dateList]
      let _reprotOneData = {
          ddate: moment().format(MONTH_DATE_FORMAT),
          qualifiedqty: 0, //合格数
          reportqty: 0, //报工数
          scrapqty: 0, //报废数
          shiftqty: 0, // 派工数
          wcid: this.wcid,
        },
        _reportTwoData = []
      // _reportThreeData = {}
      // 统计当天时间，只有数据里面的时间是当天，才显示
      reportData.forEach((dItem) => {
        _m[moment(dItem.ddate).format(MONTH_DATE_FORMAT)] = dItem.reportqty
        _reprotOneData = { ...dItem }
        // if (
        //   moment(dItem.ddate).format(MONTH_DATE_FORMAT) ===
        //   moment().format(MONTH_DATE_FORMAT)
        // ) {
        //   _reprotOneData = { ...dItem }
        // }
      })
      //
      _date.forEach((_dateItem) => {
        _reportTwoData.push(_m[_dateItem] ? _m[_dateItem] : 0)
      })
      // if (_reprotOneData.reportqty) {
      // _reportThreeData['rate'] =
      //   (Number(
      //     !isNaN(_reprotOneData.qualifiedqty)
      //       ? _reprotOneData.qualifiedqty
      //       : 0
      //   ) *
      //     100) /
      //   Number(
      //     !isNaN(_reprotOneData.reportqty) ? _reprotOneData.reportqty : 0
      //   )
      // } else {
      //   _reportThreeData['rate'] = 100
      // }

      this.reprotOneData = _reprotOneData
      this.reportTwoData = _reportTwoData
      // this.reportThreeData = _reportThreeData
    },
    loadData(_wcid, qname, exc, timeKey, timeData) {
      const params = {
          wcid: _wcid,
        },
        conditions = {}
      if (timeData) {
        params[timeKey] = timeData
        conditions[timeKey] = 'range'
      }
      this.axios
        .post(
          baseUrl + dataApi.qview + '?qname=' + qname,
          qs.stringify({
            _params: JSON.stringify(params),
            _conditions: JSON.stringify(conditions),
          }),
          {
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
              'X-Requested-with': 'XMLHttpRequest',
            },
          }
        )
        .then((response) => {
          const _data = response && response.data ? response.data : {}
          if (String(_data.code) === '0') {
            exc(_data.data)
          }
        })
        .catch((error) => {
          console.log(error)
          // this.$message('获取数据失败', 2000)
        })
    },
    getLpData(wcid) {
      const that = this
      this.axios
        .post(baseUrl + '/qdata/queryYieldQty?wcid=' + wcid, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
            'X-Requested-with': 'XMLHttpRequest',
          },
        })
        .then((result) => {
          if (result.status === 200) {
            const res = result.data
            if (String(res.code) === '0') {
              that.lpRate = res.data
              console.log('that.lpRate', that.lpRate)
            }
          }
        })
        .catch((error) => {
          console.log(error)
          // this.$message('获取数据失败', 2000)
        })
    },
  },

  data() {
    return {
      indexInv: 0,
      title: '戴莫尔可视化看板',
      startTime: '',
      endTime: '',
      wcid: {},
      lpRate: 0,
      // wcList: [],
      reprotOneData: {},
      reportTwoData: [],
      // reportThreeData: {},
      dateList: [],
      countyCheckData: [],
      reportFourHeader: [
        '机台名称',
        '工序名称',
        '今日报工',
        '生产订单',
        '物料名称',
        '派工数量',
        '报工数量',
        '合格数量',
        '操作人',
        '开工时间',
        '累计时长',
        '状态',
      ],
      reportFourDataList: [],
      reprotEqNum: {
        runningNum: 0,
        normalNum: 0,
        disabledNum: 0,
      },
    }
  },
}
</script>

<style>
.appp {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  font-size: 14px;
  padding: 15px;
  box-sizing: border-box;
  /* margin-top: 60px; */
}

.border11 path {
  stroke-width: 1 !important;
}
</style>
